<template>
  <div class="expenditure-total">
    <menu-content-layout title="全部支出">
      <template v-slot:icon>
        <img src="~/assets/images/expenditure-total.png" alt="">
      </template>
      <template v-slot:content>
        <m-form v-model="formData">
          <m-form-item>
            <m-form-item label="日期：" style="display: inline-block; width: 65%;">
              <m-date-picker v-model="formData.start_time" width="190" style="display: inline-block;" placeholder="开始日期" />
              <span style="margin-left: 55px; margin-right: 10px;">至</span>
              <m-date-picker v-model="formData.end_time" width="190" style="display: inline-block;" placeholder="结束日期" />
            </m-form-item>
            <m-form-item label="单号：" style="display: inline-block; width: 30%;margin-left: 40px;">
              <div style="display: flex; justify-content: flex-end;">
                <m-input v-model="formData.order_sn" placeholder="请输入单号" style="width: 200px; display: inline-block;"/>
              </div>
            </m-form-item>
          </m-form-item>
          <m-form-item>
            <m-form-item label="供应商：" style="display: inline-block; width: 40%;">
              <m-input v-model="formData.merchant" placeholder="请输入供应商" style="display: inline-block; width: 230px;"/>
            </m-form-item>
            <m-form-item label="产品分类：" style="display: inline-block; width: 60%;">
              <div style="display: flex; justify-content: space-between;">
                <m-select :options="options" v-model="formData.classification1" style="display: inline-block; width: 44%;" type="grey"/>
                <m-select :options="options" v-model="formData.classification2" style="display: inline-block; width: 44%;" type="grey"/>
              </div>
            </m-form-item>
          </m-form-item>
        </m-form>
        <!-- //todo -->
        <div class="button-wrap">
          <m-button width="100" style="margin-right: 15px;">搜索</m-button>
          <m-button type="bordered" width="100" @click="handleExport">导出</m-button>
        </div>
        <div class="table-wrap">
          <Table :data="expenditure" :border="true">
            <table-column prop="date" label="日期" align="center"/>
            <table-column prop="order" label="订单号" align="center"/>
            <table-column prop="name" label="产品名称" align="center"/>
            <table-column prop="type" label="产品类型" align="center"/>
            <table-column prop="count" label="数量" align="center"/>
            <table-column prop="price" label="单价" align="center">
              <template v-slot="{ row }">
                ￥{{ row.price }}
              </template>
            </table-column>
            <table-column prop="total" label="总额" align="center">
              <template v-slot="{ row }">
                ￥{{ row.total }}
              </template>
            </table-column>
          </Table>
        </div>
        <m-pagination :pagination="expenditure.length"/>
      </template>
    </menu-content-layout>
  </div>
</template>

<script>
import MenuContentLayout from '@/components/common/menu-content-layout/MenuContentLayout'
import { Col, DatePicker, Form, FormItem, Row, Table, TableColumn } from 'element-ui'
import MInput from '@/components/common/m-input/MInput'
import MDatePicker from '@/components/common/m-date-picker/MDatePicker'
import MSelect from '@/components/common/m-select/MSelect'
import MButton from '@/components/common/m-button/MButton'
import MPagination from '@/components/common/m-pagination/MPagination'
import MForm from '@/components/common/m-form/MForm'
import MFormItem from '@/components/common/m-form/MFormItem'
import {userCountWholeList} from '@/request/api'

export default {
  name: 'ExpenditureTotal',
  components: {
    MFormItem,
    MForm,
    MPagination,
    MButton,
    MSelect,
    MDatePicker,
    MInput,
    MenuContentLayout,
    Form,
    FormItem,
    Row,
    Col,
    DatePicker,
    Table,
    TableColumn
  },
  data() {
    return {
      formData: {},
      options: [
        { label: '一级分类', value: 'one' },
        { label: '二级分类', value: 'two' },
        { label: '三级分类', value: 'three' }
      ],
      expenditure: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // TODO: 缺少全部支出列表接口
    async getList() {
      const res = await userCountWholeList({...this.formData});
      console.log(res,'res');
    },
    handleExport(){
      // todo 缺少导出接口
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/style/common.scss";

.expenditure-total {
  /deep/ .el-input__inner{
    line-height: 36px;
    height: 36px;
  }
  /deep/ .el-form-item{
    margin-bottom: 10px;
  }
  .button-wrap {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 15px;
  }

  .table-wrap {
    margin-bottom: 15px;

    /deep/ .el-table th, .el-table tr {
      background-color: #F3F4F7;
      color: #666;
      border: none;
      border-bottom: solid 1px #eaeaea;
    }
  }
}
</style>
